<!--
 * @Author: nns4
 * @Date: 2020-12-11 11:30:06
 * @LastEditors: nns4
 * @FilePath: /studyNote/vue/src/views/test/sendInfo/provideinject/father.vue
 * @Description:  provide&inject 爸爸儿子孙子通讯
-->

<template>
    <div class="father">
        <div class="father border">
            <h2>父听到</h2>
            <p> 儿子说---{{儿子说}}</p>
            <p> 孙子说---{{孙子说}}</p>
            <br> <br> <br> <br>
            <son />
        </div>
    </div>

</template>

<script>
    import son from "./son"
    export default {
        components: {
            son
        },
        data() {
            return {
                儿子说: "",
                孙子说: "",
            }
        },
        provide() {
            return {
                /* 将自己暴露给子孙组件 ,这里声明的名称要于子组件引进的名称保持一致 */
                father: this
            }
        },
        methods: {
            儿子说的方法(say) {
                this.儿子说 = say
            },
            孙子说的方法(say) {
                this.孙子说 = say
            }
        }

    }
</script>

<style lang="less" scoped>
    .father {
        padding: 20px;
    }

    .border {
        border: 1px solid black;
        height: 400px;
    }
</style>